<template>
  <Layout>
    <section class="p-5 bg-white mb-5">
      <el-form
        ref="queryForm"
        label-width="120px"
        class="flex flex-wrap"
        :model="query"
      >
        <el-form-item
          class="w-3/12"
          label="企业名称"
          prop="companyName"
        >
          <el-input v-model.trim="query.companyName" />
        </el-form-item>
        <el-form-item
          class="w-3/12"
          label="付款账号"
          prop="phone"
        >
          <el-input v-model.trim="query.phone" />
        </el-form-item>
        <el-form-item
          class="w-3/12"
          label="订单状态"
          prop="orderState"
        >
          <el-select v-model.trim="query.orderState">
            <el-option
              label="全部"
              :value="undefined"
            />
            <el-option
              v-for="item in dict.order_status"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item
          class="w-3/12"
          label="下单时间"
          prop="__dateRange$createFrom$createTo"
        >
          <el-date-picker
            v-model.trim="query.__dateRange$createFrom$createTo"
            class="w-full"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          />
        </el-form-item>
        <el-form-item
          class="w-3/12"
          label="订单类型"
          prop="orderType"
        >
          <el-select v-model.trim="query.orderType">
            <el-option
              label="全部"
              :value="undefined"
            />
            <el-option
              v-for="item in dict.order_type"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            @click="handleQuery({ num: 1 })"
          >
            查询
          </el-button>
          <el-button @click="handleReset">
            重置
          </el-button>
        </el-form-item>
      </el-form>
    </section>
    <section>
      <el-table
        :data="data.records"
        border
      >
        <el-table-column
          label="订单编号"
          prop="serialNumber"
        />
        <el-table-column
          label="类型"
          prop=""
        >
          <template #default="{ row }">
            {{ row.orderType | getLabelByDict('order_type') }}
          </template>
        </el-table-column>
        <el-table-column
          label="企业名称"
          prop="companyName"
          show-overflow-tooltip
        />
        <el-table-column label="付款金额">
          <template #default="{ row }">
            <span> ￥ {{ row.payPrice | filterPrice }} </span>
          </template>
        </el-table-column>
        <el-table-column label="付款方式">
          <template #default="{ row }">
            <span>
              {{ row.payType | getLabelByDict('pay_type') | filterBlank }}
            </span>
          </template>
        </el-table-column>
        <el-table-column
          label="付款账号"
          prop="phone"
          show-overflow-tooltip
        />
        <el-table-column
          label="线下支付抬头"
          show-overflow-tooltip
        >
          <template #default="{ row }">
            <span> {{ row.offAccName | filterBlank }} </span>
          </template>
        </el-table-column>

        <el-table-column
          label="下单时间"
          prop="createTime"
        >
          <template #default="{ row }">
            <span> {{ row.createTime | formatDate }} </span>
          </template>
        </el-table-column>
        <el-table-column label="订单状态">
          <template #default="{ row }">
            <span
              :class="[row.orderState == 1 ? 'text-green-500' : 'text-red-500']"
            >{{ row.orderState | getLabelByDict('order_status') }}</span>
          </template>
        </el-table-column>

        <el-table-column
          label="开票状态"
          prop="invoiceStatus"
        >
          <template #default="{ row }">
            <span>
              {{ row.invoiceStatus | getLabelByDict('order_invoice_status') }}
            </span>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template #default="{ row }">
            <AuditModal
              v-if="canAudit(row)"
              :value="row"
            >
              <el-button type="text">
                审核
              </el-button>
            </AuditModal>
            <ChangePriceModal
              v-if="canEditPrice(row)"
              :value="row"
            >
              <el-button type="text">
                修改价格
              </el-button>
            </ChangePriceModal>
            <CreateAccountModal
              v-if="canCreateAccount(row)"
              :value="row"
            >
              <el-button type="text">
                开通账号
              </el-button>
            </CreateAccountModal>
          </template>
        </el-table-column>
      </el-table>
      <div class="text-center py-4">
        <el-pagination
          v-model:current-page="query.num"
          background
          :total="data.total"
          @current-change="handleQuery"
        />
      </div>
    </section>
  </Layout>
</template>

<script>
import Layout from '@/layout/index.vue'
import { mapGetters } from 'vuex'
import { debounce } from 'lodash-es'

export default {
    components: {
        Layout,
        ChangePriceModal: () => import('./components/ChangePriceModal'),
        CreateAccountModal: () => import('./components/CreateAccountModal.vue'),
        AuditModal: () => import('./components/AuditModal')
    },

    data() {
        return {
            query: {
                orderType: undefined,
                phone: undefined,
                orderState: undefined,
                __dateRange$createFrom$createTo: []
            }
        }
    },
    computed: {
        ...mapGetters({
            dict: 'dict/all',
            data: 'order/data'
        })
    },
    created() {
        this.init()
    },
    methods: {
        init() {
            this.handleQuery = debounce(this.handleQuery, 300)
            this.handleQuery()
        },
        handleQuery(query = {}) {
            this.query = { ...this.query, ...query }
            this.$store.dispatch('order/list', { ...this.query })
        },
        handleReset() {
            this.$refs.queryForm.resetFields()
            this.query.num = 1
            this.handleQuery()
        },
        // 是否可以开通账号
        canCreateAccount(row = {}) {
            // return true
            return row.orderState == 1
        },
        // 是否可以修改价格
        canEditPrice(row = {}) {
            // return true
            return row.orderState == 0
        },
        // 是否可以审核
        canAudit(row) {
            // return true
            return row.orderState == 2
        }
    }
}
</script>
